<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DeepSleep AI助手</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="/static/css/home.css">
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <div class="container">
            <nav class="navbar">
                <div class="logo">

                    <h1>DeepSleep AI</h1>
                </div>

                <div class="nav-links">
                    <a href="#" class="active">首页</a>
                    <a href="/product_features">产品功能</a>
                    <!--
                    <a href="#">应用场景</a>
                    <a href="#">价格方案</a>
                    <a href="#">帮助中心</a>
                    -->
                </div>

                <div class="auth-buttons">
                    <a href="/login" class="btn btn-outline">登录</a>
                    <a href="/register" class="btn btn-primary">免费注册</a>
                </div>
            </nav>
        </div>
    </header>

    <!-- Hero区域 -->
    <section class="hero">
        <div class="container">
            <div class="hero-content">
                <div class="hero-text">
                    <h2>下一代AI助手，让工作更智能</h2>
                    <p>DeepSleep AI助手集成了最先进的人工智能技术，为您提供写作、编程、学习、创意设计等多场景的智能解决方案。高效、准确、易用，提升您的工作效率。</p>
                    <div class="hero-buttons">
                        <a href="/register" class="btn btn-primary btn-lg">立即体验</a>
                        <a href="/product_features" class="btn btn-outline btn-lg">了解更多</a>
                    </div>
                </div>
                <div class="hero-image">

                </div>
            </div>
        </div>
    </section>

    <!-- 功能特点 -->
    <section class="features">
        <div class="container">
            <div class="section-title">
                <h2>强大功能，简单易用</h2>
                <p>DeepSleep AI助手拥有多种实用功能，满足您的各种需求</p>
            </div>

            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-comments"></i>
                    </div>
                    <h3>智能对话</h3>
                    <p>自然流畅的对话体验，理解上下文，提供精准回答。无论问题复杂与否，都能给出满意答复。</p>
                </div>

                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-code"></i>
                    </div>
                    <h3>编程助手</h3>
                    <p>支持多种编程语言，帮助您编写、调试和优化代码。提供代码解释和重构建议。</p>
                </div>

                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-file-alt"></i>
                    </div>
                    <h3>写作创作</h3>
                    <p>辅助撰写各类文档，从邮件到报告，从小说到剧本。提供写作灵感和结构建议。</p>
                </div>

                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-graduation-cap"></i>
                    </div>
                    <h3>学习辅导</h3>
                    <p>涵盖多学科知识，解答学习疑问，提供详细解释。帮助您掌握新知识新技能。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 演示区域 -->
    <section class="demo">
        <div class="container">
            <div class="demo-container">
                <div class="demo-content">
                    <h2>体验智能对话的魅力</h2>
                    <p>DeepSleep AI助手能够理解复杂问题，提供全面准确的解答。无论是技术问题、生活常识还是创意挑战，都能轻松应对。</p>
                    <!-- <a href="#" class="btn btn-primary">查看所有功能</a> -->
                </div>

                <div class="demo-box">
                    <div class="chat-container">
                        <div class="chat-message ai">
                            <div class="avatar">
                                <i class="fas fa-robot"></i>
                            </div>
                            <div class="message">
                                您好！我是DeepSleep AI助手。请问有什么可以帮您？
                            </div>
                        </div>

                        <div class="chat-message user">
                            <div class="avatar">
                                <i class="fas fa-user"></i>
                            </div>
                            <div class="message">
                                请帮我写一个Python函数，计算斐波那契数列
                            </div>
                        </div>

                        <div class="chat-message ai">
                            <div class="avatar">
                                <i class="fas fa-robot"></i>
                            </div>
                            <div class="message">
                                当然可以！以下是计算斐波那契数列的Python函数：
                                <pre style="background:#f1f5f9;padding:10px;border-radius:5px;margin-top:10px">
def fibonacci(n):
    if n <= 0:
        return []
    elif n == 1:
        return [0]
    elif n == 2:
        return [0, 1]

    fib_sequence = [0, 1]
    for i in range(2, n):
        next_num = fib_sequence[-1] + fib_sequence[-2]
        fib_sequence.append(next_num)

    return fib_sequence</pre>
                                这个函数接受一个整数n作为参数，返回包含前n个斐波那契数的列表。
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 使用场景 -->
    <section class="use-cases">
        <div class="container">
            <div class="section-title">
                <h2>多场景应用</h2>
                <p>DeepSleep AI助手适用于各种工作和生活场景</p>
            </div>

            <div class="cases-grid">
                <div class="case-card">
                    <div class="case-header">
                        <h3>工作场景</h3>
                    </div>
                    <div class="case-body">
                        <ul>
                            <li>工作报告撰写与润色</li>
                            <li>商业邮件写作</li>
                            <li>数据分析与解读</li>
                            <li>会议纪要整理</li>
                            <li>项目管理建议</li>
                        </ul>
                    </div>
                </div>

                <div class="case-card">
                    <div class="case-header">
                        <h3>学习场景</h3>
                    </div>
                    <div class="case-body">
                        <ul>
                            <li>作业问题解答</li>
                            <li>学习计划制定</li>
                            <li>论文写作辅助</li>
                            <li>概念解释说明</li>
                            <li>考试复习指导</li>
                        </ul>
                    </div>
                </div>

                <div class="case-card">
                    <div class="case-header">
                        <h3>创作场景</h3>
                    </div>
                    <div class="case-body">
                        <ul>
                            <li>小说创作灵感</li>
                            <li>剧本情节设计</li>
                            <li>广告文案创作</li>
                            <li>诗歌写作辅助</li>
                            <li>内容创意生成</li>
                        </ul>
                    </div>
                </div>

                <div class="case-card">
                    <div class="case-header">
                        <h3>技术场景</h3>
                    </div>
                    <div class="case-body">
                        <ul>
                            <li>编程问题解决</li>
                            <li>代码调试优化</li>
                            <li>技术文档生成</li>
                            <li>算法解释实现</li>
                            <li>API使用指导</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script type="module" src="/static/js/home.js"></script>
</body>
</html>